<template>
  <div>
    <el-card>
      <!-- 搜索条件 -->
      <el-form :model="searchParam" :inline="true">
        <el-form-item label="字典值编码">
          <el-input
            placeholder="请输入字典值编码"
            v-model="searchParam.code"
            clearable
            @keyup.enter="getTableData"
          />
        </el-form-item>
        <el-form-item label="字典值">
          <el-input
            placeholder="请输入字典值"
            v-model="searchParam.dictName"
            clearable
            @keyup.enter="getTableData"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchParam.status"
            placeholder="请选择状态"
            clearable
            @keyup.enter="getTableData"
          >
            <el-option
              v-for="item in statusArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <commonBtn
            :value="'搜索'"
            :type="'primary'"
            :icon="'search'"
            :plain="true"
            @click="getTableData"
          ></commonBtn>
          <commonBtn
            :value="'重置'"
            :icon="'refresh'"
            @click="refreshForm"
          ></commonBtn>
        </el-form-item>
      </el-form>
      <el-row>
        <commonBtn
          :value="'新增'"
          :type="'primary'"
          :icon="'plus'"
          :plain="true"
          @click="addValue"
        ></commonBtn>
      </el-row>
      <el-table :data="searchParam.data" v-loading="isLoad">
        <el-table-column label="编号" align="center" show-overflow-tooltip>
          <template #default="scope">
            {{
              (searchParam.current - 1) * searchParam.size + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="code"
          label="字典编码"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="dictName"
          label="字典值"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="字典排序"
          prop="sortNumber"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="字典值状态" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.status == '0'">正常</el-tag>
            <el-tag type="danger" v-if="scope.row.status == '1'">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="dictRemark" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
          <template #default="scope">
            <editBtn :value="'编辑'" @click="editValue(scope.row)" />
            <delBtn :value="'删除'" @click="delValue(scope.row.id)" />
          </template>
        </el-table-column>
      </el-table>
      <pag
        :showPage="true"
        :pageData="searchParam"
        @getTableData="getTableData"
      />
      <addEdit
        :layer="layer"
        @getTableData="getTableData"
        v-if="layer.show"
        :id="searchParam.parentId"
      />
    </el-card>
  </div>
</template>
<script>
import pag from "_c/pag/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { defineComponent, getCurrentInstance, ref, reactive } from "vue";
import commonBtn from "_c/commonBtn/index.vue";
import editBtn from "_c/editBtn/index.vue";
import delBtn from "_c/delBtn/index.vue";
import { statusArr } from "../enum.js";
import { getDictValueData, delValueOne } from "@/api/dictValue.js";
import addEdit from "./addEdit.vue";
export default defineComponent({
  name: "dictValueTable",
  components: {
    commonBtn,
    editBtn,
    delBtn,
    pag,
    addEdit,
  },
  setup() {
    //表格加载
    const isLoad = ref(true);
    // 弹窗控制器
    const layer = reactive({
      show: false,
      title: "新增",
      showButton: true,
      width: 500,
    });
    //声明查询条件
    const searchParam = reactive({
      parentId: "",
      code: "",
      dictName: "",
      status: "",
      current: 1,
      size: 10,
      data: [], //列表数据
      total: 0, //总数
    });
    const { proxy } = getCurrentInstance();
    //获取地址栏参数
    const getParam = () => {
      let id = proxy.$route.query.id;
      if (id) {
       localStorage.setItem("dictId", id);
      } else {
       id = localStorage.getItem("dictId");
      }
      searchParam.parentId = id;
      getTableData();
    };
    //查询列表数据
    const getTableData = async () => {
      let params = {
        pageNum: searchParam.current,
        pageSize: searchParam.size,
        code: searchParam.code.trim() || undefined,
        dictName: searchParam.dictName.trim() || undefined,
        status: searchParam.status.trim() || undefined,
        parentId: searchParam.parentId,
      };
      const { data, success } = await getDictValueData(params);
      if (success) {
        searchParam.data = data.records;
        searchParam.total = parseInt(data.total);
        isLoad.value = false;
      }
    };
    //搜索条件重置
    const refreshForm = () => {
      searchParam.code = "";
      searchParam.dictName = "";
      searchParam.status = "";
      //todo 查询表单数据
      getTableData();
    };
    //新增
    const addValue = () => {
      layer.title = "新增字典值";
      layer.show = true;
      delete layer.row;
    };
    //编辑
    const editValue = (row) => {
      layer.title = "编辑字典值";
      layer.show = true;
      layer.row = row;
    };
    //删除方法
    const delValueFn = (id) => {
      delValueOne(id).then((res) => {
        if (res.success) {
          ElMessage.success("删除成功！");
          getTableData();
        }
      });
    };
    //删除
    const delValue = (id) => {
      if (id) {
        ElMessageBox.confirm("您确认要删除该条数据？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            delValueFn(id);
          })
          .catch(() => {
            ElMessage.info("取消成功！");
          });
      }
    };
    onMounted: {
      getParam();
    }
    return {
      isLoad,
      layer,
      searchParam,
      statusArr,
      refreshForm,
      getTableData,
      addValue,
      editValue,
      delValue,
    };
  },
});
</script>
<style lang="scss" scoped>
.el-form {
  display: flex;
  justify-content: left;
}
.el-table {
  margin-top: 15px;
}
</style>
